<template>
  <up-popup mode="bottom" :round="10" :show="showPopup" @close="handleHidePopup">
    <view class="popup">
      <view class="popup-header">红包设置</view>
      <view class="popup-content">
        <up-form
            labelPosition="top"
            labelWidth="100%"
            :model="formData"
            :rules="rules"
            ref="uFormRef"
        >
          <up-form-item label="红包个数" prop="num">
            <up-input v-model="formData.num" placeholder="请输入红包个数"></up-input>
          </up-form-item>
          <up-form-item label="红包金额" prop="money">
            <up-input v-model="formData.money" placeholder="请输入红包金额"></up-input>
          </up-form-item>
          <up-form-item label="赠送学分" prop="jifen">
            <up-input v-model="formData.jifen" placeholder="请输入赠送学分"></up-input>
          </up-form-item>
        </up-form>
      </view>
      <view class="popup-footer">
        <up-button block type="primary" @click="handleSubmit">确定</up-button>
      </view>
    </view>
  </up-popup>
</template>
<script lang="ts" setup>
import { setRedPackApi } from '@/addon/htscrm/api';
import { ref } from 'vue'

const uFormRef = ref()
const showPopup = ref(false)
const formData = ref({
  num: '',
  money: '',
  jifen: '',
  id: ''
})

const rules = ref({
  num: [
    { required: true, message: '请输入赠送数量' }
  ],
  money: [
    { required: true, message: '请输入赠送金额' }
  ],
  jifen: [
    { required: true, message: '请输入赠送学分' }
  ]
})


const handleHidePopup = () => {
  showPopup.value = false
}

const handleShowPopup = (item:IActivityItem) => {
  formData.value.num = item.hongbaocount;
  formData.value.money = item.hongbao_min;
  formData.value.jifen = item.jifen_min;
  formData.value.id = item.id
  console.log(formData.value);
  
  showPopup.value = true
}

/**
 * 提交表单
 */
function handleSubmit() {
  uFormRef.value?.validate().then(async (valid:boolean) => {  
    if (valid) {  
      await setRedPackApi(formData.value)
      uni.$u.toast('保存成功')
    } else {  
      uni.$u.toast('校验失败')
    }  
  }).catch(() => {  
    // 处理验证错误  
    uni.$u.toast('校验失败')
  }); 
}

defineExpose({
  handleShowPopup
})
</script>

<style lang="scss" scoped>
.popup {
  background: #fff;
  border-radius: 10rpx;
  .popup-header {
    text-align: center;
    font-weight: bold;
    padding: 30rpx;
  }
  .popup-content {
    padding: 20rpx 30rpx;
  }

  .popup-footer {
    padding: 20rpx 30rpx;
  }
}
</style>